
<div class="mod-appstore app-detail mod-deploy" ng-form="ng-form" role="form" name="deployForm" ng-class="{'need-valid':needValid}">
  <loading ng-if="deployIns.loadingIns.isLoading||isLoading"></loading>
  <ul class="com-list-info">
    <li ng-if="!deployConfig.stateful"><span class="info-name">实例个数</span>
      <div class="info-content container-info">
        <input class="ui-input-fill ui-input-sm container-txt" ng-model="deployConfig.replicas" name="replicas" ng-pattern="/^[1-9]\d*$/" is-over="is-over" max="999" min="1"/><span class="container-unit">个</span><span class="txt-error" ng-if="(needValid||deployForm.replicas.$dirty)&amp;&amp;deployForm.replicas.$invalid">请填写0~999范围内的数字</span>
      </div>
    </li>
    <li><span class="info-name not-align-input">镜像仓库</span><span class="info-content" ng-bind="deployConfig.containerDrafts[0].registry"></span></li>
    <li><span class="info-name not-align-input">镜像名称</span><span class="info-content" ng-bind="deployConfig.containerDrafts[0].image"></span></li>
    <li><span class="info-name not-align-input">镜像版本</span><span class="info-content" ng-bind="deployConfig.containerDrafts[0].tag"></span></li>
    <li><span class="info-name">容器大小</span>
      <div class="info-content">CPU(个)
        <input class="ui-input-sm ui-input-fill container-cpu" ng-model="deployConfig.containerDrafts[0].cpu" name="cpu" required="required" ng-pattern="/^(\d*\.)?\d+$/"/>内存(MB)
        <input class="ui-input-sm ui-input-fill" ng-model="deployConfig.containerDrafts[0].mem" name="mem" required="required" ng-pattern="/^(\d*\.)?\d+$/"/><span class="txt-error" ng-if="(needValid||deployForm.cpu.$dirty)&amp;&amp;deployForm.cpu.$invalid||(needValid||deployForm.mem.$dirty)&amp;&amp;deployForm.mem.$invalid">请填写数字</span>
      </div>
    </li>
    <li><span class="info-name" ng-class="{'not-align-input':!hasEnv}">运行过程环境变量</span>
      <div class="info-content">
        <div class="line-longer"><span ng-if="!hasEnv">无</span>
          <table class="ui-table-primary full ui-table-env" ng-if="hasEnv=deployConfig.containerDrafts[0].envs">
            <thead>
              <tr>
                <th>环境变量名</th>
                <th>环境变量值</th>
                <th>描述</th>
              </tr>
            </thead>
            <tbody>
              <tr ng-repeat="env in deployConfig.containerDrafts[0].envs">
                <td ng-bind="env.key"></td>
                <td>
                  <input class="ui-input-fill ui-input-full" ng-model="env.value" name="envValue" diy-pattern="deployConfig.containerDrafts[0].envChecker[env.key]"/>
                </td>
                <td ng-bind="env.description"></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </li>
    <li ng-if="deployConfig.stateful"><span class="info-name not-align-input">网络模式</span>
      <div class="info-content"><span class="com-check-con">
          <input class="ui-radio" type="radio" id="default" name="networkmode" ng-model="deployConfig.networkMode" value="DEFAULT"/>
          <label for="default">默认</label></span><span class="com-check-con">
          <input class="ui-radio" type="radio" id="host" name="networkmode" ng-model="deployConfig.networkMode" value="HOST" ng-change="deployIns.changeNetworkmode()"/>
          <label for="host">Host</label></span></div>
    </li>
    <li><span class="info-name">负载均衡</span>
      <div class="info-content log-content"><span ng-if="deployConfig.loadBalanceDrafts.length===1" style="display:inline-block;margin-top:24px;">无</span>
        <div class="log-item" ng-form="ng-form" ng-repeat="loadbalance in deployConfig.loadBalanceDrafts" name="childForm" ng-if="!$last">
          <div class="line-full"><span class="log-title not-align-input">  端口映射名称</span><span ng-bind="loadbalance.name"></span></div>
          <div class="line-full"><span class="log-title">程序服务端口</span>
            <input class="ui-input-fill line-element" placeholder="请输入端口号" name="targetPort" ng-model="loadbalance.targetPort" required="required" ng-pattern="/^[0-9]+$/" ng-change="deployIns.changeTargetPort($index)"/>
            <div class="txt-error" ng-if="(childForm.targetPort.$dirty||needValid)&amp;&amp;childForm.targetPort.$error.pattern">请填写数字</div>
          </div>
          <div class="line-full"><span class="log-title" ng-class="{'not-align-input':deployConfig.networkMode=='HOST'}"> 对外访问端口</span>
            <input class="ui-input-fill line-element" placeholder="请输入端口号" name="port" ng-model="loadbalance.port" ng-if="deployConfig.networkMode!='HOST'" required="required" ng-pattern="/^[0-9]+$/"/>
            <div class="txt-error" ng-if="(childForm.port.$dirty||needValid)&amp;&amp;childForm.port.$error.pattern">请填写数字</div><span ng-bind="loadbalance.port" ng-if="deployConfig.networkMode=='HOST'"></span>
          </div>
          <div class="line-full" ng-if="!deployConfig.stateful"><span class="log-title"> 对外访问IP</span>
            <div class="line-element">
              <div class="ips" ng-repeat="ips in deployConfig.loadBalanceDrafts[$index].externalIPs">
                <input class="ui-input-fill full" placeholder="请输入对外访问IP" name="externalIPs" ng-focus="$last&amp;&amp;deployIns.addExternalIPs($parent.$index)" ng-model="ips.ip"/><a class="txt-wrap icon-delete" ng-show="loadbalance.externalIPs.length&gt;1" ng-click="deployIns.deleteExternalIPs($parent.$index,$index)"></a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </li>
    <li><span class="info-name">部署节点</span>
      <div class="info-content">
        <div class="line-longer">
          <div class="line-element com-select-con" select-con="select-con">
            <button class="ui-btn ui-btn-white ui-btn-select"><i class="icon-down"></i>{{deployIns.clusterListIns.cluster.name||'选择集群'}}</button>
            <ul class="select-list">
              <li ng-if="deployIns.clusterList.length===0"><a>无相关信息</a></li>
              <li class="select-item" ng-repeat="cluster in deployIns.clusterListIns.clusterList"><a ng-click="deployIns.toggleCluster($index)" ng-bind="cluster.name"></a></li>
            </ul>
          </div>
          <div class="line-element com-select-con tool-next" select-con="select-con">
            <button class="ui-btn ui-btn-white ui-btn-select" ng-cloak="ng-cloak"><i class="icon-down"></i>{{deployIns.envText}}</button>
            <ul class="select-list">
              <li class="select-item" ng-repeat="env in deployIns.envList"><a ng-bind="env.text" ng-click="deployIns.toggleEnv(env)"></a></li>
            </ul>
          </div>
        </div>
        <p class="host-desciption" ng-if="deployConfig.stateful">系统在每台所选主机上运行一个实例</p>
        <div class="line-longer" ng-if="deployConfig.stateful">
          <ul class="host-info">
            <li>
              <input class="ui-check" type="checkbox" id="hostAll" ng-model="deployIns.nodeListIns.isCheckAll" ng-change="deployIns.nodeListIns.checkAllNode()"/>
              <label for="hostAll"></label><span>全选</span>
            </li>
            <li ng-repeat="node in deployIns.nodeListIns.nodeList|filter:{'labelFilter':true}">
              <input class="ui-check" type="checkbox" id="host{{$index}}" ng-model="node.isSelected" ng-change="deployIns.nodeListIns.toggleNodeCheck(node)"/>
              <label for="host{{$index}}"></label><span ng-bind="node.name"></span>
            </li>
          </ul>
        </div>
        <div class="line-longer" ng-if="!deployConfig.stateful">
          <div class="ui-input-white host-txt-con com-select-con" select-con="select-con" label="true">
            <ul class="selected-labels">
              <li class="select-label" ng-repeat="(label,value) in deployIns.nodeListIns.labelsInfo|search:'isSelected':true|search:'isShow':true" ng-cloak="ng-cloak"><a class="icon-cancle icon-cancle-former" ng-click="deployIns.nodeListIns.toggleLabel(label,false)"></a>{{label}}</li>
              <li class="select-input">
                <input class="line-element ui-btn-select" placeholder="选择主机标签" ng-model="labelKey.key" ng-keydown="labelKeyDown($event,labelKey.key,labelsInfoFiltered);" ng-focus="selectFocus()"/>
              </li>
            </ul>
            <ul class="select-list">
              <li ng-if="Object.keys(labelsInfoFiltered).length===0"><a>无相关信息</a></li>
              <li class="select-item" ng-repeat="(label,value) in labelsInfoFiltered=(deployIns.nodeListIns.labelsInfo| searchKey:labelKey.key|search:'isShow':true)"><a ng-bind="label" ng-click="deployIns.nodeListIns.toggleLabel(label,true);labelKey.key='';"></a></li>
            </ul>
          </div><span class="txt-wrap"><a class="link-safe" ng-click="deployIns.nodeListIns.showHost()">查看选中主机</a></span>
        </div>
      </div>
    </li>
    <li><span class="info-name">namespace</span>
      <div class="info-content">
        <div class="com-select-con line-longer" select-con="select-con" ng-if="!deployIns.isNewNamespace">
          <button class="ui-btn ui-btn-white ui-btn-select"><i class="icon-down"></i>{{deployConfig.namespace||'选择已有namespace'}}</button>
          <ul class="select-list">
            <li ng-if="deployIns.namespaceList.length===0"><a>无相关信息</a></li>
            <li class="select-item" ng-repeat="namespace in deployIns.namespaceList"><a ng-bind="namespace.name" ng-click="deployIns.toggleNamespace(namespace.name)"></a></li>
          </ul><span class="txt-wrap"><a class="link-safe" ng-click="deployIns.toggleIsNewNamespace()">新建namespace</a></span>
          <input type="hidden" name="selectNamespace" ng-model="deployConfig.namespace" required="required"/>
        </div>
        <div class="line-longer" ng-if="deployIns.isNewNamespace">
          <input class="ui-input-white ui-input-full" placeholder="新建namespace" ng-model="config.namespace" name="namespace" ng-model-options="{updateOn:'default blur',debounce:{default:500,blur:0}}" required="required" ng-pattern="/^[a-zA-Z][a-zA-Z0-9_-]*$/" is-namespace-exist="is-namespace-exist" clusterid="{{deployIns.clusterListIns.cluster.id}}"/><span class="txt-wrap"><a class="link-safe" ng-click="deployIns.toggleIsNewNamespace()">选择已有namespace</a></span>
        </div><span class="txt-error" ng-if="needValid&amp;&amp;deployForm.selectNamespace.$invalid">请选择namespace</span><span class="txt-error" ng-if="(needValid||deployForm.namespace.$dirty)&amp;&amp;deployForm.namespace.$error.required">请填写namespace</span><span class="txt-error" ng-if="(needValid||deployForm.namespace.$dirty)&amp;&amp;!deployForm.namespace.$error.required&amp;&amp;deployForm.namespace.$error.pattern">非法的namespace</span><span class="txt-error" ng-if="(needValid||deployForm.namespace.$dirty)&amp;&amp;!deployForm.namespace.$error.required&amp;&amp;deployForm.namespace.$error.isNamespaceExist">namespace已存在</span>
      </div>
    </li>
    <li><span class="info-name">部署名称</span>
      <div class="info-content">
        <input class="line-longer ui-input-fill" ng-model="deployConfig.deployName" name="deployName" ng-pattern="/^[0-9a-z]([-.]*[0-9a-z]+)*$/" ng-maxlength="20" is-deploy-exist="is-deploy-exist" namespace="{{deployConfig.namespace}}" clustername="{{deployIns.clusterListIns.cluster.name}}" ng-model-options="{updateOn:'default blur',debounce:{default:500,blur:0}}" required="required"/><span class="txt-error" ng-if="(needValid||deployForm.deployName.$dirty)&amp;&amp;deployForm.deployName.$error.required">必填</span><span class="txt-error" ng-if="(needValid||deployForm.deployName.$dirty)&amp;&amp;!deployForm.deployName.$error.required&amp;&amp;deployForm.deployName.$error.isDeployExist">部署名已存在</span><span class="txt-error" ng-if="(needValid||deployForm.deployName.$dirty)&amp;&amp;!deployForm.deployName.$error.required&amp;&amp;deployForm.deployName.$error.pattern">非法的名称</span><span class="txt-error" ng-if="(needValid||deployForm.deployName.$dirty)&amp;&amp;!deployForm.deployName.$error.required&amp;&amp;deployForm.deployName.$error.maxlength">长度超出限制</span>
      </div>
    </li>
    <li><span class="info-name">创建者</span>
      <div class="info-content">
        <creator-selection change-event="deployIns.toggleCreator(user)"></creator-selection>
        <input type="hidden" name="creatorName" ng-model="deployIns.creator.id" required="required"/><span class="txt-error" ng-show="needValid&amp;&amp;deployForm.creatorName.$invalid">请选择创建者</span>
      </div>
    </li>
    <li><span class="info-name">日志</span>
      <div class="info-content log-content"><span ng-if="deployConfig.logDraft.logItemDrafts.length===1" style="display:inline-block;margin-top:24px;">无</span>
        <div class="log-item" ng-form="ng-form" ng-repeat="log in deployConfig.logDraft.logItemDrafts" name="childForm" ng-if="!$last"><a class="icon-cancel cancel-log" ng-click="deployIns.deleteLogDraft($index)"></a>
          <div class="line-full log-path"><span class="log-title">日志卷路径：</span><span class="log-detail-txt">{{log.logPath}}</span></div>
          <div class="log-check">
            <input class="ui-check" id="autoCollect{{$index}}" type="checkbox" name="autoCollect" ng-model="log.autoCollect"/>
            <label for="autoCollect{{$index}}">自动收集日志</label>
          </div>
          <div class="line-full" ng-if="log.autoCollect"><span class="log-title"> 日志topic</span>
            <input class="ui-input-fill line-element" placeholder="请输入日志topic" name="logTopic" ng-model="log.logTopic" required="required"/>
          </div>
          <div class="line-full" ng-if="log.autoCollect"><span class="log-title"> 预处理命令</span><span class="log-detail-txt">{{log.processCmd||'无'}}<a class="icon-help" popover="对收集到的日志做进一步处理，比如筛选或增减字段等，可以用grep和awk命令完成，命令以管道形式执行，因此必须以“|”开始，比如一个典型的处理命令为：   | grep &quot;ERROR\\|WARN\\| EXCEPTION\\| statistic&quot; | awk -vnhost=&quot;$HOSTNAME&quot; '{print &quot;[&quot;nhost&quot;]--&quot;$0}'，该命令将只筛选包含四个对应关键字的行，并且会在行首添加&quot;[hostname]--&quot;的字符串，参照可完成其他复杂的处理方式"></a></span></div>
          <div class="log-check">
            <input class="ui-check" id="autoDelete{{$index}}" type="checkbox" name="autoDelete" ng-model="log.autoDelete"/>
            <label for="autoDelete{{$index}}">自动删除日志</label>
          </div>
          <div class="line-full" ng-if="log.autoDelete"><span class="log-title"> 过期时间</span>
            <input class="ui-input-fill" placeholder="过期则自动删除" name="logExpired" ng-model="log.logExpired" required="required" ng-pattern="/^[1-9]\d*$/"/><span class="unit">小时</span>
          </div>
          <div class="txt-error log-error" ng-if="(needValid||deployForm.logExpired.$dirty)&amp;&amp;deployForm.logExpired.$invalid">请输入大于0的整数</div>
        </div>
      </div>
    </li>
  </ul>
  <div class="com-bottom-option"><span class="com-bottom-option-con"><a class="ui-btn-white ui-btn ui-btn-lg ui-btn-link" ui-sref="appStore">取消</a>
      <button class="ui-btn-bright ui-btn ui-btn-lg" ng-disabled="deployIns.loadingIns.isLoading||isLoading" ng-click="needValid=true;deployForm.$valid&amp;&amp;createDeploy()">创建部署</button><span class="txt-error" ng-if="needValid&amp;&amp;deployForm.$invalid">存在不合法数据，请修改后提交！</span></span></div>
</div>